import React, { useState } from 'react';
import { useLocation , useNavigate } from 'react-router-dom';
import { Breadcrumb } from 'antd';
import 'moment/locale/zh-cn';
const moment = require('moment');
export interface IAppProps {

}

function App() {
  const location = useLocation()
  const [item] = useState((location.state as any).item)
  const navigate=useNavigate()
  const goDetail=(item:any)=>{
    navigate(`/detail/${item.id}`,{
        state:{
            item
        }
    })
}
  return (
    <div className='detail'>
      <Breadcrumb>
        <Breadcrumb.Item>知识小册</Breadcrumb.Item>
        <Breadcrumb.Item>{item.title}</Breadcrumb.Item>
      </Breadcrumb>
      <h3><b>{item.title}</b></h3>
      <div className="content">
        <p><img src={item.cover} alt="" /></p>
        <p><b>{item.title}</b></p>
        <p>{item.summary}</p>
        <p>{item.likes}次阅读<b> · </b><span>{moment().format('YYYY-MM-D  h:mm:ss')}</span></p>
        <button className='button' onClick={()=>goDetail(item)}>开始阅读</button>
      </div>
    </div>
  );
}

export default App
